<template>
  <div style="padding: 0 2rem;">
    <p class="polygon_title font_s36 textC colorF" style="position: absolute; top: 7%; left: 48%;">受理清单列表</p>
    <ul class="flex shouLi_title colorF font_s20 textC">
      <li class="flex2">受理街道名称</li>
      <li class="flex2">当日受理人数（初次评估）</li>
    </ul>
    <div class="superviseList" style="height: 48vh;">
      <ul class="shouLi-list">
        <li class="flex shouLi_content colorF font_s18 textC" v-for="item in dataList" v-bind:key="item.id">
          <span class="flex2">{{ item.sljdmc }}</span>
          <span class="flex2">{{ item.drslrs }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ShouLi',
  data () {
    return {
      dataList: [
        {
          sljdmc: '金杨新村街道',
          drslrs: 25
        },
        {
          sljdmc: '浦兴街道',
          drslrs: 20
        },
        {
          sljdmc: '三林镇',
          drslrs: 20
        },
        {
          sljdmc: '祝桥镇东海',
          drslrs: 39
        }
      ]
    }
  }
}
</script>
<style scoped>
.shouLi_title {
  line-height: 2.5rem;
  /* border-radius: 10px 10px 0 0; */
  border: 1px solid lightgreen;
  /* background:#4ca5ab;  */
}
.shouLi_content {
  line-height: 3.625rem;
  overflow: hidden;
  span {
    padding: 1rem;
  }
  /* border-radius: 5px; */
  /* background: #27515f; */
  /* margin: 0.825rem 0; */
}
.superviseList {
  overflow-x: hidden;
  overflow-y: scroll;
}
.shouLi-list li:nth-of-type(even) {
  background: #1d3843;
}
</style>
